<template>
  <div class="app">
    <div class="header">
      <div class="top-warp">
        <ul>
          <li><img src="../../assets/icon/返回.png" alt="返回左" /></li>
          <li><img src="../../assets/icon/返回2.png" alt="返回右" /></li>
          <li><img src="../../assets/icon/刷新.png" alt="刷新" /></li>
        </ul>
      </div>

      <div class="header-menu">
        <router-link to="/music" class="menu-link" active-class="is-active"
          >发现音乐</router-link
        >
        <router-link to="/newMv" class="menu-link" active-class="is-active"
          >MV</router-link
        >
        <router-link to="/radio" class="menu-link" active-class="is-active"
          >电台</router-link
        >
        <router-link
          to="/secondElemen"
          class="menu-link notify"
          active-class="is-active"
          >二次元</router-link
        >
      </div>

      <div class="search-bar">
        <el-input
          placeholder="搜索"
          prefix-icon="el-icon-search"
          v-model="searchValue"
        >
        </el-input>
      </div>

      <div class="header-profile">
        <div class="notification">
          <span class="notification-number">3</span>
          <svg
            viewBox="0 0 24 24"
            fill="currentColor"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="feather feather-bell"
          >
            <path
              d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 01-3.46 0"
            />
          </svg>
        </div>

        <svg viewBox="0 0 512 512" fill="currentColor" class="currentColor">
          <path
            d="M448.773 235.551A135.893 135.893 0 00451 211c0-74.443-60.557-135-135-135-47.52 0-91.567 25.313-115.766 65.537-32.666-10.59-66.182-6.049-93.794 12.979-27.612 19.013-44.092 49.116-45.425 82.031C24.716 253.788 0 290.497 0 331c0 7.031 1.703 13.887 3.006 20.537l.015.015C12.719 400.492 56.034 436 106 436h300c57.891 0 106-47.109 106-105 0-40.942-25.053-77.798-63.227-95.449z"
          />
        </svg>

        <div class="user-stater">
          <div class="user" v-if="isLogin">注销</div>
          <div class="login" v-else @click="musicLogins">登陆</div>
        </div>
      </div>
    </div>

    <!--下 面部分 -->
    <Main></Main>

    <!-- 登陆 模块 -->

    <el-dialog
      title="提示"
      :visible.sync="showDialog"
      width="35%"
      :modal="false"
      :close-on-press-escape="false"
      :before-close="handleClose"
    >
      <loginDome></loginDome>
    </el-dialog>
  </div>
</template>

<script>
import main from '@/components/main/main.vue'
import loginDome from './loginDialog.vue'
export default {
  components: {
    Main: main,
    loginDome,
  },
  data() {
    return {
      searchValue: '',
      showDialog: false,
      isLogin: false,
    }
  },

  beforeCreate() {},
  created() {},
  beforeMount() {},
  methods: {
    musicLogins() {
      this.showDialog = true
      console.log('点击了登录按钮====')
    },
    handleClose(done) {
      this.$confirm('确认关闭当前弹窗吗？', '登录')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    // dialogClose(e) {
    //   this.showDialog = false
    //   console.log(e, '点击关闭回调')
    // },
  },
  mounted() {},

  computed: {},
}
</script>

<style scoped lang="less">
.app {
  max-height: 800px;
  min-width: 700px;
  // width: 100%;
  height: 99vh;
  display: flex;
  margin-top: 50px;
  flex-direction: column;
  background-color: rgba(26, 22, 22, 0.4);
  border-radius: 12px;
  font-size: 15px;
  backdrop-filter: blur(20px);
  // overflow: hidden;
  .header {
    display: flex;
    align-items: center;
    // justify-content: space-between;
    padding: 0 30px;
    border-bottom: 1px solid rgba(113 119 144 / 25%);
    .top-warp {
      height: 100%;
      align-items: center;
      margin-right: 150px;
      ul {
        display: flex;
        height: 58px;
        align-items: center;
        li {
          list-style: none;
          height: 16px;
          width: 16px;
          padding: 0 16px;
          cursor: pointer;
        }
      }
    }
    .header-menu {
      display: flex;
      align-items: center;
      a {
        position: relative;
        padding: 20px 30px;
        text-decoration: none;
        transition: 0.3s;
        color: rgba(113 119 144 / 78%);
        &:hover {
          color: #f9fafb;
          font-weight: 500;
          border-bottom: 2px solid #f9fafb;
        }
      }
      .is-active {
        color: #f9fafb;
        border-bottom: 2px solid #f9fafb;
      }
      .notify::before {
        content: '';
        background-color: #3a6df0;
        position: absolute;
        right: 15px;
        top: 15px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
      }
    }
    .search-bar {
      height: 40px;
      width: 100%;
      max-width: 400px;
      padding-left: 16px;
      ::v-deep .el-input .el-input__inner {
        background-color: #14162b;
        border: 0;
        font-size: 15px;
      }
    }
    .header-profile {
      display: flex;
      cursor: pointer;
      align-items: center;
      margin-left: auto;
      .notification {
        position: relative;
        .notification-number {
          position: absolute;
          top: -6px;
          right: -6px;
          width: 16px;
          height: 16px;
          font-size: 10px;
          border-radius: 50%;
          background-color: #3a6df0;
          text-align: center;
          color: #fff;
          align-items: center;
        }
        .feather-bell {
          color: #f9fafb;
          width: 22px;
          flex-shrink: 0;
        }
      }
      .currentColor {
        width: 22px;
        color: #f9fafb;
        flex-shrink: 0;
        padding-left: 30px;
      }
      .user-stater {
        display: flex;
        font-size: 15px;
        color: rgba(113 119 144 / 25%);
        margin-left: 30px;
      }
    }
  }
  ::v-deep .el-dialog {
    margin-top: 23vh !important;
  }
}
</style>
